{% extends 'base.html' %}

{% block title %}AI服务配置 - 资讯聚合平台{% endblock %}

{% block page_title %}AI服务配置{% endblock %}

{% block page_actions %}
<button class="btn" id="add-config-btn">
    <i class="fas fa-plus"></i> 添加配置
</button>
{% endblock %}

{% block content %}
<div class="config-list">
    {% if ai_configs %}
        <div class="config-cards">
            {% for config in ai_configs %}
                <div class="config-card">
                    <div class="config-header">
                        <h3>{{ config.name }}</h3>
                        <div class="config-actions">
                            <button class="test-btn" data-id="{{ config.id }}" title="测试连接">
                                <i class="fas fa-vial"></i>
                            </button>
                            <button class="edit-btn" data-id="{{ config.id }}" title="编辑">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="delete-btn" data-id="{{ config.id }}" title="删除">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="config-body">
                        <div class="config-item">
                            <span class="label">AI服务URL:</span>
                            <span class="value">{{ config.url }}</span>
                        </div>
                        <div class="config-item">
                            <span class="label">API密钥:</span>
                            <span class="value">••••••••</span>
                        </div>
                        <div class="config-item">
                            <span class="label">状态:</span>
                            <span class="value status-badge {% if config.is_active %}active{% else %}inactive{% endif %}">
                                {% if config.is_active %}启用{% else %}禁用{% endif %}
                            </span>
                        </div>
                        <div class="config-item test-result" id="test-result-{{ config.id }}" style="display: none;">
                            <span class="label">测试结果:</span>
                            <span class="value test-status"></span>
                            <div class="test-message"></div>
                        </div>
                        <div class="config-item">
                            <span class="label">更新时间:</span>
                            <span class="value">{{ config.updated_at|date:"Y-m-d H:i" }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <i class="fas fa-cog fa-3x"></i>
            <p>暂无AI服务配置</p>
            <p class="hint">点击右上角"添加配置"按钮创建新配置</p>
        </div>
    {% endif %}
</div>

<!-- 添加/编辑配置模态框 -->
<div class="modal" id="config-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">添加AI服务配置</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="config-form" method="post">
                {% csrf_token %}
                <input type="hidden" name="config_id" id="config_id">
                <div class="form-group">
                    <label for="name">配置名称</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="url">AI服务URL</label>
                    <input type="url" id="url" name="url" required>
                </div>
                <div class="form-group">
                    <label for="api_key">API密钥</label>
                    <input type="password" id="api_key" name="api_key" required>
                </div>
                        <div class="form-group form-check">
                            <input type="checkbox" id="is_active" name="is_active" class="form-check-input">
                            <label class="form-check-label" for="is_active">启用此配置</label>
                        </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal" id="delete-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <p>确定要删除此AI服务配置吗？此操作不可撤销。</p>
            <div class="form-actions">
                <button type="button" class="btn-cancel">取消</button>
                <button type="button" class="btn-delete">删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .config-list {
        margin-top: 20px;
    }
    
    .config-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .config-card {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 25px; /* 更大的圆角，接近椭圆形 */
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        backdrop-filter: blur(10px); /* 磨玻璃效果 */
        -webkit-backdrop-filter: blur(10px); /* Safari支持 */
    }
    
    .config-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .config-header {
        background: linear-gradient(135deg, #5a9f73, #78c08d); /* 绿色渐变 */
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 25px; /* 匹配卡片圆角 */
        border-top-right-radius: 25px; /* 匹配卡片圆角 */
    }
    
    .config-header h3 {
        margin: 0;
        font-size: 1.2em;
    }
    
    .config-actions {
        display: flex;
        gap: 10px;
    }
    
    .config-actions button {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .config-actions button:hover {
        background: rgba(255, 255, 255, 0.4);
    }
    
    .config-body {
        padding: 15px;
    }
    
    .config-item {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
    }
    
    .config-item .label {
        font-size: 0.9em;
        color: #7a938b;
        margin-bottom: 5px;
    }
    
    .config-item .value {
        font-weight: 500;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 0;
        color: #7a938b;
    }
    
    .empty-state i {
        margin-bottom: 20px;
        opacity: 0.5;
    }
    
    .empty-state .hint {
        font-size: 0.9em;
        opacity: 0.7;
        margin-top: 10px;
    }
    
    /* 测试结果样式 */
    .test-result {
        margin-top: 10px;
        padding: 10px;
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
    }
    
    .test-result .test-status {
        font-weight: 600;
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
    }
    
    .test-result .test-status.success {
        background-color: rgba(46, 204, 113, 0.2);
        color: #27ae60;
    }
    
    .test-result .test-status.error {
        background-color: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
    }
    
    .test-result .test-message {
        margin-top: 8px;
        font-size: 0.9em;
        color: #7a938b;
        word-break: break-word;
    }
    
    .status-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.85em;
        font-weight: 600;
    }
    
    .status-badge.active {
        background-color: rgba(46, 204, 113, 0.2);
        color: #27ae60;
    }
    
    .status-badge.inactive {
        background-color: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
    }
    
    /* 模态框样式 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    
    .modal-content {
        background: rgba(255, 255, 255, 0.7); /* 磨玻璃效果，略透明 */
        border-radius: 25px; /* 椭圆形UI */
        width: 90%;
        max-width: 500px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* 更强的阴影 */
        animation: modal-in 0.3s ease-out;
        backdrop-filter: blur(15px); /* 磨玻璃效果 */
        -webkit-backdrop-filter: blur(15px); /* Safari支持 */
    }
    
    @keyframes modal-in {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-header h3 {
        margin: 0;
        color: var(--dark-gray);
    }
    
    .close-btn {
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
        color: #7a938b;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: var(--dark-gray);
        font-weight: 500;
    }
    
    .form-group input {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 1em;
        transition: border-color 0.3s;
    }
    
    .form-group input:focus {
        border-color: var(--primary-green);
        outline: none;
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn-cancel {
        background-color: #95a5a6; /* 灰色 */
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px; /* 椭圆形按钮 */
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(149, 165, 166, 0.3); /* 灰色阴影 */
    }
    
    .btn-cancel:hover {
        background: #e5e5e5;
    }
    
    .btn-submit {
        background: linear-gradient(135deg, #5a9f73, #78c08d); /* 绿色渐变 */
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px; /* 椭圆形按钮 */
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(90, 159, 115, 0.3); /* 绿色阴影 */
    }
    
    .btn-submit:hover {
        transform: translateY(-2px);
    }
    
    .btn-delete {
        background-color: #e74c3c; /* 红色 */
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px; /* 椭圆形按钮 */
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); /* 红色阴影 */
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const configModal = document.getElementById('config-modal');
        const deleteModal = document.getElementById('delete-modal');
        const addConfigBtn = document.getElementById('add-config-btn');
        const closeBtns = document.querySelectorAll('.close-btn');
        const cancelBtns = document.querySelectorAll('.btn-cancel');
        const configForm = document.getElementById('config-form');
        const editBtns = document.querySelectorAll('.edit-btn');
        const deleteBtns = document.querySelectorAll('.delete-btn');
        const deleteBtn = document.querySelector('.btn-delete');
        
        let currentDeleteId = null;
        const testBtns = document.querySelectorAll('.test-btn');
        
        // 测试按钮点击事件
        testBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const configId = this.getAttribute('data-id');
                const testResultDiv = document.getElementById(`test-result-${configId}`);
                const statusSpan = testResultDiv.querySelector('.test-status');
                const messageDiv = testResultDiv.querySelector('.test-message');
                
                // 显示加载状态
                testResultDiv.style.display = 'block';
                statusSpan.textContent = '测试中...';
                statusSpan.className = 'value test-status';
                messageDiv.textContent = '';
                
                // 发送测试请求
                fetch(`/push_notifications/ai_config/${configId}/test/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        statusSpan.textContent = '测试成功';
                        statusSpan.classList.add('success');
                        messageDiv.textContent = data.message || '已成功连接到AI服务';
                        
                        // 添加动画效果
                        testResultDiv.animate([
                            { backgroundColor: 'rgba(46, 204, 113, 0.3)' },
                            { backgroundColor: 'rgba(255, 255, 255, 0.5)' }
                        ], {
                            duration: 1500,
                            easing: 'ease-out'
                        });
                    } else {
                        statusSpan.textContent = '测试失败';
                        statusSpan.classList.add('error');
                        messageDiv.textContent = data.message || '无法连接到AI服务';
                        
                        // 添加动画效果
                        testResultDiv.animate([
                            { backgroundColor: 'rgba(231, 76, 60, 0.3)' },
                            { backgroundColor: 'rgba(255, 255, 255, 0.5)' }
                        ], {
                            duration: 1500,
                            easing: 'ease-out'
                        });
                    }
                })
                .catch(error => {
                    statusSpan.textContent = '测试失败';
                    statusSpan.classList.add('error');
                    messageDiv.textContent = '请求出错，请稍后再试';
                    console.error('Error testing AI service:', error);
                });
            });
        });
        
        // 打开添加配置模态框
        addConfigBtn.addEventListener('click', function() {
            document.getElementById('modal-title').textContent = '添加AI服务配置';
            document.getElementById('config_id').value = '';
            configForm.reset();
            configForm.reset();
            document.getElementById('is_active').checked = true;
            configModal.style.display = 'flex';
        });
        
        // 关闭模态框
        closeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                configModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        cancelBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                configModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        // 点击编辑按钮
        editBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const configId = this.getAttribute('data-id');
                // 这里应该发送AJAX请求获取配置详情，然后填充表单
                // 为了演示，我们假设已经获取到数据
                document.getElementById('modal-title').textContent = '编辑AI服务配置';
                document.getElementById('config_id').value = configId;
                // 填充表单字段
                // name.value = config.name;
                // url.value = config.url;
                // 这里应该通过AJAX请求获取配置详情
                // 为了演示，我们假设已经获取到数据
                // document.getElementById('api_key').value = config.api_key;
                // document.getElementById('is_active').checked = config.is_active;
                configModal.style.display = 'flex';
            });
        });
        
        // 点击删除按钮
        deleteBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                currentDeleteId = this.getAttribute('data-id');
                deleteModal.style.display = 'flex';
            });
        });
        
        // 确认删除
        deleteBtn.addEventListener('click', function() {
            if (currentDeleteId) {
                // 发送删除请求
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/push_notifications/ai_config/${currentDeleteId}/delete/`;
                
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
                
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
            }
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === configModal) {
                configModal.style.display = 'none';
            }
            if (event.target === deleteModal) {
                deleteModal.style.display = 'none';
            }
        });
    });
</script>
{% endblock %}